<!--
  - Copyright(c)  2022 厦门外里科技有限公司 All rights reserved.
  -
  - https://www.wailikeji.com
  -
  - 版权所有，侵权必究！
  -->

<template>
	<view class="scrool-page">
		<u-navbar title-color="#fff" :background="{background:'#4fc08d'}" title="收银台">
		</u-navbar>
		<view class="wrap">
			<view class="header-panel" style="display: flex;">
				<view class="canWithdraw">¥</view>
				<view class="bankGold">{{goodInfo.price}}</view>
			</view>
			<view style="display: flex;flex-direction: row;padding: 20upx;margin-top: 10upx;">
				<view style="font-size: 28upx;">付款方式</view>
			</view>
			<view class="page-box" style="background-color: #FFFFFF;">
				<view style="padding: 0 20upx; ">
					<view style="display: flex;height: 100upx;align-items: center;padding: 20upx 0upx 20upx 20upx;"
						v-for="(item,index) in payChannelList" :key='index'>
						<image :src="baseUrl+item.iconUrl" style="width: 55upx;height: 55upx;border-radius: 50upx;" />
						<view style="font-size: 30upx;color: #333333; padding-left: 20upx; width: 80%;text-align: left">
							{{item.name}}
						</view>
						<radio-group name="payChannelIndex" style="margin-left: 20upx;" @tap='selectWay(index)'>
							<label class="tui-radio">
								<radio color="#4fc08d" :checked="payChannelIndex === index ? true : false" />
							</label>
						</radio-group>
					</view>
				</view>
			</view>
			<view class="tip">点击"确认支付"表示您同意《微群人脉平台付费服务协议》</view>
			<u-button class="withdraw-btn" shape="circle" type="success" @click="submit()">确认支付</u-button>
		</view>
		<image v-if="isShowOpenInBrowser"
			style=" height:168rpx; width:128rpx; position: absolute ;right: 20rpx; top:60rpx ; z-index: 10080;"
			src="../../static/images/my/recharge/jiant.png" mode="aspectFit"></image>
		<view v-if="isShowOpenInBrowser"
			style="text-align:  center;font-size: 40rpx;  position: absolute;color: white;  width: 100%;height: 200rpx; top: 300rpx; z-index: 10080;">
			请在浏览器中打开
			<br>
			以完成支付
		</view>
		<u-popup border-radius="20" v-model="isShowOpenInBrowser" mode="center" width="680rpx" height="282rpx"
			:custom-style="titleStyle">
			<image style="height: 300rpx;width: 680rpx;" src="../../static/images/my/recharge/openInBrowser.png"
				mode="aspectFit"></image>
		</u-popup>
	</view>
</template>

<script>
	import {
		API_URL
	} from '@/env'

	export default {
		data() {
			return {
				titleStyle: {
					top: "-200rpx"
				},
				baseUrl: API_URL,
				user: {},
				payChannelIndex: 0,
				payChannelList: [],
				isShowOpenInBrowser: false, //是否显示外部浏览器打开
				goodInfo: {}

			};
		},
		onLoad() {

			//如果是H5
			// #ifdef H5
			console.log("h5")
			let payOrder = this.$Route.query.payOrder
			if (payOrder) {
				this.$api.api('pay.payByOrder', {
						orderId: payOrder
					})
					.then(res => {
						if (res.code == 200) {
							const div = document.createElement('div')
							div.innerHTML = res.data //此处form就是后台返回接收到的数据
							document.body.appendChild(div)
							document.forms[0].submit()
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
							//去掉payOrder，重新加载页面
							// let query = {};
							// query.scene = ;
							// query.goodId = this.userVipShopList[this.vipShopSelect].id;
							// this.$Router.push({
							// 	path: "/pages/my/recharge",
							// 	params: query
							// })


							this.scene = this.$Route.query.scene
							this.goodId = this.$Route.query.goodId
							if (this.scene == undefined || this.goodId == undefined) {
								this.returnHome();
							}
							let hash = window.location.hash;
							let protocol = window.location.protocol;
							let host = window.location.host;
							let pathname = window.location.pathname;
							let newUrl = protocol + '//' + host + pathname + hash.split("?")[0]
							//页面无刷新修改url
							location.replace(newUrl + "?&scene=" + this.scene +
								"&goodId=" + this.goodId
							)
						}
					})
				console.log("return")
				return

			}

			// #endif

			this.init()
		},
		//页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		onShow() {

		},
		methods: {
			selectWay(index) {
				this.payChannelIndex = index;
			},
			returnHome() {
				this.$tools.routerTo('/pages/my/index');
			},
			init() {
				console.log("init")
				this.scene = this.$Route.query.scene
				this.goodId = this.$Route.query.goodId
				if (this.scene == undefined || this.goodId == undefined) {
					console.log("returnHome1")
					this.returnHome();
				}
				let promise
				if (this.scene == 0) {
					promise = this.$api.apiPath('config.vipShopInfo', "/" + this.goodId)
				} else if (this.scene == 1) {
					promise = this.$api.apiPath('config.goldShopInfo', "/" + this.goodId)
				} else if (this.scene == 2) {
					promise = this.$api.apiPath('config.agentShopInfo', "/" + this.goodId)
				} else {
					console.log("returnHome2")
					this.returnHome();
				}
				if (promise) {
					promise.then(res => {
						if (res.code == 200) {
							this.goodInfo = res.data
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						}
					})
				}
				this.$api.api('config.payChannelList')
					.then(res => {
						if (res.code == 200) {
							this.payChannelList = res.rows
							//设置默认支付方式
							this.payChannelList.forEach(k => {
								if (k.isDefault == 1) {
									this.payChannelIndex = this.payChannelList.indexOf(k)
								}
							})
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						}
					})
			},

			submit() {
				console.log("submit")
				//如果不是H5
				// #ifndef H5
				this.$api.api('pay.buy', {
						shopId: this.goodId,
						scene: this.scene,
						payChannelId: this.payChannelList[this.payChannelIndex].id,
						isNeedGetForm: true
					})
					.then(res => {
						if (res.code == 200) {
							this.setPayment('alipay', res.data);
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						}
					})
				// #endif
				//如果是H5
				// #ifdef H5

				//支付宝在微信环境下,提示在浏览器中打开
				if (this.payChannelList[this.payChannelIndex].type == 0 && this.isWeiXinH5()) {

					this.$api.api('pay.buy', {
							shopId: this.goodId,
							scene: this.scene,
							payChannelId: this.payChannelList[this.payChannelIndex].id,
							isNeedGetForm: false
						})
						.then(res => {
							if (res.code == 200) {
								this.isShowOpenInBrowser = true
								let hash = window.location.hash;
								let protocol = window.location.protocol;
								let host = window.location.host;
								let pathname = window.location.pathname;
								let newUrl = protocol + '//' + host + pathname + hash.split("?")[0]
								//页面无刷新修改url
								window.history.replaceState({}, '', newUrl + '?payOrder=' + res.data +
									"&scene=" + this.scene +
									"&goodId=" + this.goodId
								)
							} else {
								uni.showToast({
									icon: 'none',
									position: 'bottom',
									title: res.msg
								});
							}
						})
				}
				//普通浏览器下
				else {
					this.$api.api('pay.buy', {
							shopId: this.goodId,
							scene: this.scene,
							payChannelId: this.payChannelList[this.payChannelIndex].id,
							isNeedGetForm: true
						})
						.then(res => {
							if (res.code == 200) {
								const div = document.createElement('div')
								div.innerHTML = res.data //此处form就是后台返回接收到的数据
								document.body.appendChild(div)
								document.forms[0].submit()

							} else {
								uni.showToast({
									icon: 'none',
									position: 'bottom',
									title: res.msg
								});
							}
						})
				}
				// #endif
			},
			//判断是否微信浏览器环境
			isWeiXinH5() {
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					return true; // 微信中打开
				} else {
					return false; // 普通浏览器中打开
				}
			},
			//app支付
			setPayment(name, order) {
				uni.requestPayment({
					provider: name,
					orderInfo: order, //微信、支付宝订单数据
					success: function(res) {
						uni.hideLoading();
						uni.showLoading({
							title: '支付成功'
						});
						setTimeout(this.returnHome(), 3000);
					},
					fail: function(err) {
						uni.hideLoading();
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			/**
			 * 跳转路由
			 * @param {Object} url
			 */
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	};
</script>

<style lang="less">
	page {
		width: 100%;
		background: #f8f8f8;
	}

	.scrool-page {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		text-align: center;

		.header-panel {
			width: 100%;
			height: 250upx;
			background-color: #4fc08d;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.canWithdraw {
			font-size: 32upx;
			color: #FFFFFF;
			padding-top: 20upx;
		}

		.bankGold {
			font-size: 70upx;
			color: #FFFFFF;
			padding-top: 20upx;
		}
	}

	.withdraw-btn {
		margin: 32upx;
		font-size: 16px;
		color: white;
	}

	.tip {
		padding: 20upx 0upx;
		font-size: 25upx;
		color: #999999;
	}
</style>
